<template>
  <el-dialog
    :title="dialogTitle"
    :visible.sync="dialogVisible"
    width="30%"
    center
  >
    <div v-if="isSuccess" class="text-center fontDiv">
      <!-- <div style="display:flex">
        <div style="width:150px;line-height:40px">退款金额：</div>
        <el-input
          v-model="refundAmount_now"
          step="0.01"
          type="number"
          @change="raChange"
        />
      </div> -->
      <p>您确定要退款吗？</p>
      <p v-if=" type!='datail' ">（点击查看<span class="blue-font pointer" @click="toDetails">退款明细</span> ）</p>
    </div>
    <div v-else class="text-center fontDiv">
      <img src="../../../assets/images/refund_tip.png" alt="">
      <p class="sorry">对不起，退款失败！</p>
      <p class="fail_reason">失败原因：账户余额不足</p>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button
        v-if="isSuccess"
        v-loading.fullscreen.lock="agreeLoading"
        type="primary"
        element-loading-text="正在提交,请稍后..."
        @click="submitRefund"
      >确 定</el-button>
      <el-button v-else type="primary" @click="topUp">去充值</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { shopCheckPass } from '@/api/orderRefund'
export default {
  props: ['refundId', 'orderId', 'refundStatus', 'type', 'refundAmount'],
  data() {
    return {
      dialogTitle: '同意退款',
      dialogVisible: false,
      isSuccess: true,
      agreeLoading: false,
      // 商户设置金额
      refundAmount_now: 0,
      // 商户是否有修改过金额，修改过则会按照修改金额退款
      isAmountChange: 0
    }
  },
  watch: {
    refundAmount() {
      this.refundAmount_now = this.refundAmount
    }
  },
  mounted() {

  },
  methods: {
    raChange() {
      if (this.refundAmount_now > this.refundAmount) {
        this.refundAmount_now = this.refundAmount
        this.$message({
          message: '退款金额不能超过付款金额',
          type: 'error'
        })
        return
      }

      if (this.refundAmount_now < 0) {
        this.refundAmount_now = this.refundAmount
        this.$message({
          message: '退款金额不能小于0',
          type: 'error'
        })
        return
      }

      this.isAmountChange = 1
    },
    close() {
      this.dialogVisible = false
      this.agreeLoading = false
    },
    submitRefund() {
      this.agreeLoading = true
      shopCheckPass(this.refundId, this.isAmountChange, this.refundAmount_now).then((res) => {
        this.close()
        this.$parent.getList()
      }).catch((err) => {
        if (err.status == 101) {
          this.isSuccess = false
        }
        this.agreeLoading = false
      })
    },
    topUp() {
      const routeData = this.$router.resolve({
        name: 'recharge'
      })
      window.open(routeData.href, '_blank')
    },
    toDetails() {
      this.dialogVisible = false
      const id = this.orderId
      this.$router.push({ name: 'refundDetail', params: { id }})
    }
  }
}
</script>

<style lang="scss" scoped>
.fontDiv p {
  line-height: 30px;
}
.sorry{
  font-size: 16px;
  font-weight: bold;
  color: #333333;
}
.fail_reason{
  font-size: 14px;
  color: #666666;
}
</style>
